import { StyleSheet } from 'react-native';
import { Colors } from './colors';

export const GlobalStyles = StyleSheet.create({
  // 容器樣式
  container: {
    flex: 1,
    backgroundColor: Colors.white,
  },
  
  mobileContainer: {
    flex: 1,
    maxWidth: 375,
    alignSelf: 'center',
    backgroundColor: Colors.white,
  },
  
  // 漸變按鈕樣式（需要使用 LinearGradient）
  gradientButtonContainer: {
    borderRadius: 12,
    overflow: 'hidden',
  },
  
  gradientButton: {
    paddingVertical: 16,
    paddingHorizontal: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  gradientButtonText: {
    color: Colors.white,
    fontSize: 16,
    fontWeight: '600',
  },
  
  // 輸入框樣式
  formInput: {
    borderWidth: 1,
    borderColor: Colors.gray[300],
    borderRadius: 12,
    paddingVertical: 12,
    paddingHorizontal: 16,
    fontSize: 16,
    backgroundColor: Colors.white,
    minHeight: 48, // 确保安卓上有足够的高度
    textAlignVertical: 'center', // 安卓文本垂直居中
  },
  
  // 卡片樣式
  card: {
    backgroundColor: Colors.white,
    borderRadius: 16,
    padding: 16,
    shadowColor: Colors.black,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  
  // 標題樣式
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: Colors.gray[800],
  },
  
  subtitle: {
    fontSize: 18,
    fontWeight: '600',
    color: Colors.gray[700],
  },
  
  // 文字樣式
  bodyText: {
    fontSize: 16,
    color: Colors.gray[600],
    lineHeight: 24,
  },
  
  smallText: {
    fontSize: 14,
    color: Colors.gray[500],
  },
  
});

// 間距（非 StyleSheet 對象，避免類型錯誤）
export const Spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};